<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
var formatUtil = echarts.format;
var unit = "";

export default {
  props: {
    title: "",
    unit: "",
    tableChoice: "",
  },
  data() {
    return {
      isDownLoad: 0,
      option: [],
      labelName: "",
      labelName1: "",
      echartsList: [],
      xlist: [],
      ylist: [],
      echartsList1: [],
      xlist1: [],
      ylist1: [],
      dataColumn: [],
      dataColumn1: [],
      openColumn: [],
      openColumn1: [],
      worldMapContainer: {},
      diskData: [],
      fileName: "",
    };
  },
  mounted() {
    this.worldMapContainer = document.getElementById("main");
    //设置容器高宽
    this.isDownLoad = this.$route.query.download;
    this.resizeWorldMapContainer();
  },
  methods: {
    getData(data) {
      let dataList = data[0].dataList;
      console.log("dataList", dataList);
      console.log("title", this.title);
      console.log("fileName", this.tableChoice.split(","));
      let arr = this.tableChoice.split(",");
      let fileName = arr.filter((item) => {
        return item.indexOf("数据") != -1;
      });
      console.log(fileName[0]);
      console.log(fileName[0].split("|")[1]);
      this.fileName = fileName[0].split("|")[1];
      unit = this.unit;

      dataList.forEach((el) => {
        el.value = el[this.fileName];
      });
      let result = this.arrToTree(dataList);
      this.diskData = result;
      console.log("result", result);
      this.$nextTick(() => {
        this.getEcgarts();
      });
    },

    arrToTree(data) {
      let tree = [];
      if (!Array.isArray(data)) {
        return tree;
      } // 将数组转换成对象（键值对），将ID作为属性名，原来的数组里的对象作为属性值
      let map = {};
      data.forEach((item) => {
        map[item.id] = item;
      }); // 通过对象的属性名（ID）来找到父级节点，将存到map里的对象取出来放到父级节点的childere数组中
      data.forEach((item) => {
        let parent = map[item.pid]; // 修改对象的属性
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          tree.push(item);
        }
      });
      return tree;
    },

    //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    resizeWorldMapContainer() {
      if (this.isDownLoad == 1) {
        this.worldMapContainer.style.width = "3840px";
        this.worldMapContainer.style.height = "2164px";
      } else {
        this.worldMapContainer.style.width = window.innerWidth - 270 + "px";
        this.worldMapContainer.style.height = window.innerHeight - 40 + "px";
      }
    },
    downloadFile(url, fileName) {
      var link = document.createElement("a");
      //设置下载的文件名
      document.body.appendChild(link);
      link.style.display = "none";
      link.href = url;
      link.download = fileName;
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL();
      // window.open(url);
    },

    getLevelOption() {
      return [
        {
          itemStyle: {
            borderWidth: 0,
            gapWidth: 5,
          },
        },
        {
          itemStyle: {
            gapWidth: 1,
          },
        },
        {
          colorSaturation: [0.35, 0.5],
          itemStyle: {
            gapWidth: 1,
            borderColorSaturation: 0.6,
          },
        },
      ];
    },

    getEcgarts() {
      var myChart = echarts.init(this.worldMapContainer);
      this.option = {
        tooltip: {
          trigger: "axis",
        },
        title: {
          text: this.title,
          x: "center",
          y: "top",
          textAlign: "left",
          textStyle: {
            fontSize: "22",
          },
        },
        grid: {
          show: true,
          top: "40px",
          left: "10px",
          right: "10px",
          bottom: "40px",
          containLabel: true,
          borderWidth: 1,
          borderColor: "#D1D1D1",
          backgroundColor: "rgba(128, 128, 128, 0)",
        },
        animation: false,
        tooltip: {
          formatter: function (info) {
            var value = info.value;
            var treePathInfo = info.treePathInfo;
            var treePath = [];
            for (var i = 1; i < treePathInfo.length; i++) {
              treePath.push(treePathInfo[i].name);
            }
            return [
              '<div class="tooltip-title">' +
                formatUtil.encodeHTML(treePath.join("/")) +
                "</div>",
              " " + formatUtil.addCommas(value) + unit,
            ].join("");
          },
        },

        series: [
          {
            name: this.title,
            type: "treemap",
            visibleMin: 300,
            label: {
              show: true,
              formatter: "{b}",
              fontSize: 16,
            },
            itemStyle: {
              borderColor: "#fff",
            },
            levels: this.getLevelOption(),
            data: this.diskData,
          },
        ],
      };

      if (this.isDownLoad == 1) {
        this.option.title.textStyle.fontSize = 90;
        this.option.title.textStyle.lineHeight = 90;
        this.option.grid.top = 200;
        this.option.grid.right = 270;
        this.option.dataZoom = [];
        this.option.series[0].label.fontSize = 90;
      }

      myChart.setOption(this.option);
      if (this.isDownLoad == 1) {
        const chartImgUrl = myChart.getDataURL({
          pixelRatio: 1,
          backgroundColor: "rgba(128, 128, 128, 0)",
          type: "png",
        });
        setTimeout(() => {
          this.downloadFile(chartImgUrl, this.title);
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss"></style>
